<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>IFE JavaScript Task 06</title>
    <style>
        #num li{
            padding: 3px 6px;
            color: #000;
            margin: 5px;
            cursor: pointer;
            width: 80%;
        }
        textarea,input{
            margin: 12px auto;
        }
        .group,#num{
            width: 303px;
            margin: 0 auto;
        }
        .red{
            color: red;
        }
    </style>
</head>
<body>
    <div class="group">
        <!--只能输入数字，小数点也无法输入-->
        <textarea rows="10" cols="40" id="inputText"></textarea>
        <button class="btn" id="leftIn">插在前列</button>
        <button class="btn" id="rightIn">插入后列</button>
        <button class="btn" id="leftOut">删除前列</button>
        <button class="btn" id="rightOut">删除后列</button>
        <input type="text" id="searchText">
        <button class="btn" id="search">查询</button>
    </div>
    <ul id="num">
    </ul>

    <script>
        window.onload = function () {
            var  num = document.getElementById('num');
            var numli = num.getElementsByTagName('li');
            function init() {
                inputValue = document.getElementById('inputText').value;
                nodeli = document.createElement('li');
                nodepre = document.createElement('pre');
                nodetext = document.createTextNode(inputValue);
                nodepre.appendChild(nodetext);
                nodeli.appendChild(nodepre);
            }
            document.getElementById('rightIn').onclick = function(){
                init();
                num.appendChild(nodeli);
            };
            document.getElementById('leftIn').onclick = function(){
                init();
                num.insertBefore(nodeli,numli[0]);
            };
            document.getElementById('leftOut').onclick = function () {
                init();
                var firstChild = num.firstElementChild;
                alert(firstChild.innerHTML);
                num.removeChild(firstChild);

            };
            document.getElementById('rightOut').onclick = function () {
                init();
                var lastChild = num.lastElementChild;
                alert(lastChild.innerHTML);
                num.removeChild(lastChild);
            };

            document.getElementById('search').onclick = function () {
                var keyword = document.getElementById('searchText').value;
                var reg = new RegExp("(" + keyword + ")", "g");
                var len = numli.length;
                var arr = new Array;
                var arr2 = new Array;
                for(var m = 0;m < len ;m++){
                    arr[m] = numli[m].getElementsByTagName('pre')[0].innerHTML;
                }
                for(var i=0;i<len;i++){
                    if(arr[i].indexOf(keyword)>=0){
                        arr2.push(arr[i]);
                    }
                    num.innerHTML = '';
                }
                for(var j=0;j<arr2.length;j++){
                    init();
                    var searchValue1 = arr2[j];
                    var searchValue2 = searchValue1.replace(reg, "<span class='red'>$1</span>");
                    var searchNodeli = document.createElement('li');
                    var searchNodepre = document.createElement('pre');
                    searchNodeli.appendChild(searchNodepre);
                    num.appendChild(searchNodeli);
                    numli[j].getElementsByTagName('pre')[0].innerHTML = searchValue2;
                    console.log(arr2[j]);
                }
            }
            var timer1 = setInterval(function () {
                if(numli.length > 0){
                    for(var i = 0;i < numli.length;i++){
                        numli[i].onclick = function () {
                            this.parentNode.removeChild(this);
                            clearInterval(timer1);
                        };
                    };
                };
            },100);

        }
    </script>
</body>
</html>